/* 内置 */
.align-top {
    align-self: flex-start;
}

.align-middle {
    align-self: center;
}

.align-bottom {
    align-self: flex-end;
}

.block {
    display: block;
}

.inline {
    display: inline;
    width: auto;
}

.fl {
    float: left
}

.fr {
    float: right
}

.tl {
    text-align: left;
}

.tc {
    text-align: center
}

.tr {
    text-align: right;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow: hidden;
}

/* 阴影 */
.shadow {
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

.shadow:hover {
    transform: var(--transform-3d-010);
    box-shadow: var(--box-shadow-hover);
}

/* 字体颜色 */
.text-primary {
    /* 黑色 */
    color: #303133;
    color: var(--primary);
}

.text-secondary {
    /* 通用 */
    color: #303133;
    color: var(--secondary);
}

.text-success {
    /* 成功 */
    color: #303133;
    color: var(--success);
}

.text-warning {
    /* 警告 */
    color: #303133;
    color: var(--warning);
}

.text-danger {
    /* 危险 */
    color: #303133;
    color: var(--danger);
}

.text-muted {
    /* 和谐 */
    color: #303133;
    color: var(--muted);
}

.text-white {
    /* 白色 */
    color: #fff;
    color: var(--white-ligth);
}

/* 背景色 */

.bg-primary {
    /* 默认 */
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

.bg-secondary {
    /* 蓝色 */
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.bg-success {
    /* 绿色 */
    color: var(--white);
    background-color: var(--success);
    border-color: var(--success);
}

.bg-warning {
    /* 黄色 */
    color: var(--white);
    background-color: var(--warning);
    border-color: var(--warning);
}

.bg-danger {
    /* 红色 */
    color: var(--white);
    background-color: var(--danger);
    border-color: var(--danger);
}

.bg-muted {
    /* 灰色 */
    color: var(--white);
    background-color: var(--muted);
    border-color: var(--muted);
}

.bg-white {
    /* 白色 */
    color: var(--black);
    background-color: var(--white);
    border-color: var(--white);
}

.bg-black {
    /* 黑色 */
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
}

/* 边框 */
.border {
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: var(--border-radius);
}

.border-secondary {
    /* 蓝色 */
    border-color: var(--secondary);
    color: var(--secondary);
}

.border-success {
    /* 绿色 */
    border-color: var(--success);
    color: var(--success);
}

.border-warning {
    /* 黄色 */
    border-color: var(--warning);
    color: var(--warning);
}

.border-danger {
    /* 红色 */
    border-color: var(--danger);
    color: var(--danger);
}

.border-muted {
    /* 灰色 */
    border-color: var(--muted);
    color: var(--muted);
}

.border-white {
    /* 白色 */
    border-color: var(--white);
    color: var(--white);
}

.border-black {
    /* 黑色 */
    border-color: var(--black);
    color: var(--black);
}

/* 显示隐藏 */
.bny-show {
    display: block
}

.bny-hide {
    display: none
}

/* 显示隐藏 垂直 */
.bny-show-v {
    visibility: visible
}

.bny-hide-v {
    visibility: hidden
}

.bny-show-block {
    display: block
}

.bny-show-inline {
    display: inline
}

.bny-show-inline-block {
    display: inline-block
}